import React, { forwardRef, useEffect, useState } from 'react'

import { Form, Input, Select } from 'antd';
const { Option } = Select;

function ModelForm(props, ref) {
    const [isChick, setisChick] = useState(false)
    // 当传入的状态变化时就修改其可编辑状态
    useEffect(() => {
        setisChick(props.isUpdateDisabled)
    }, [props.isUpdateDisabled])
    //  从本地存储中获取用户信息
    const { role: { roleType }, regionId } = JSON.parse(localStorage.getItem("token"))
    // 控制地区下拉禁用
    const isChickReg = (item) => {
        if (props.isEdit) {
            //编辑
            //如果是超级管理员就不禁用，否则就禁用不准修改
            return roleType === 1 ? false : true
        } else {
            // 新增时
            //如果是超级管理员就可以随意修改，否则就让下拉内容等于用户的地区可选
            return roleType === 1 ? false : (item.id !== regionId)
        }
    }
    // 控制角色下拉框禁用
    const isChickRole = (item) => {
        // 编辑
        if (props.isEdit) {
            return roleType === 1 ? false : true
        } else {
            // 新增
            return roleType === 1 ? false : (item.id !== 3)
        }
    }
    // 密码校验
    const pasRules = () => { 
        if (props.isEdit) {
            return ([
                { max: 10, message: '密码长度不能超过10！' },
                { min: 6, message: '密码长度不能小于6！' }
            ])
        } else {
            return ([
                { required: true, message: '请输入密码！！' },
                { max: 10, message: '密码长度不能超过10！' },
                { min: 6, message: '密码长度不能小于6！' }
            ])
        }
    }
    return (
        <Form
            ref={ref}
            layout="vertical"
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[{ required: true, message: '请输入用户名！！' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={pasRules()}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item
                name="regionId"
                label="区域"
                rules={isChick ? [] : [{ required: true, message: '请选择区域！！' }]}
            >
                <Select disabled={isChick}>
                    {
                        props.regionList.map(item =>
                            item.id !== 8 &&<Option value={item.id} disabled={isChickReg(item)} key={item.id}>{item.value}</Option>
                        )
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色"
                rules={[{ required: true, message: '请选择角色！！' }]}
            >
                <Select
                    onChange={(value) => {
                        if (value === 1) {
                            setisChick(true)
                            ref.current.setFieldsValue({
                                regionId: ''
                            })
                        } else {
                            setisChick(false)
                        }
                    }}
                >
                    {
                        props.roleList.map(item =>
                            <Option value={item.id} disabled={isChickRole(item)} key={item.id}>{item.roleName}</Option>
                        )
                    }
                </Select>
            </Form.Item>
        </Form>
    )
}
// 透传ref
export default forwardRef(ModelForm)